<template>
    <div>
        <div class="market-header">
            <div class="category-layout">
                <el-button v-for="category in categories" :key="category.cid" class="category-btn"
                    @click="getCards(category.cid, 1)">
                    {{ category.cname }}
                </el-button>
            </div>
            <div class="search-container">
                <el-input class="search-container-input" v-model="searchContext"
                    placeholder="Search Module In All Categories~" :prefix-icon="Search" />
                <el-button class="search-btn" >搜索</el-button>
                <el-button class="refresh-btn" :icon="Refresh" circle @click="refershModule" />
            </div>
        </div>
        <el-scrollbar :height=scrollHeight>
            <div class="market-main">
                <TransitionGroup name="card-fade">
                    <ModuleCard v-for="(module, index) in modules" :key="index" :module="module"
                        @click="$router.push('/content')" />
                </TransitionGroup>
            </div>
            <div class="market-footer">
                <el-pagination v-show="pageShow" background layout="prev, pager, next"
                    :page-count="pageObject.totalPage" v-model:current-page="pageObject.currentPage" :total="1000" />
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import type Category from '@/types/Category';
import type Module from '@/types/Module';
import { ref, onMounted, watch, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { findCategories, findModulesByCID, findRandomModule } from '@/api/market';
import { Search, Refresh } from '@element-plus/icons-vue'
import ModuleCard from '@/components/market/ModuleCard.vue';
import type PageData from '@/types/PageData';
import { useWindowSize } from 'vue-window-size';

const categories = ref<Category[]>();//目录数据
const searchContext = ref();//搜索内容
const modules = ref<Module[]>();//模块数据
const pageObject = reactive({
    totalPage: 0, //总页数
    currentPage: 1 //当前页
});
const currentCid = ref();//当前目录id
const pageShow = ref<boolean>(false) //控制分页组件显隐
const windowSize = useWindowSize()
//82--导航--87--搜索+目录
const scrollHeight = computed(() => {
    return windowSize.height.value - 72 - 100
})

onMounted(() => {
    findAll()
    refershModule()
})

watch(() => pageObject.currentPage, (newValue, oldValue) => {
    // console.log(`new: ${newValue},old: ${oldValue}`)
    getCards(currentCid.value, newValue)
})


/**
 * 刷新模块--随机8个
 */
async function refershModule() {
    pageShow.value = false
    const {data} = await findRandomModule()
    data.state == 200? modules.value = data.data : ElMessage.warning(data.message)
}

/**
 * 查找指定目录下的模块数据
 * @param cId 指定目录id
 * @param currentPage 请求页
 */
async function getCards(cId: number, currentPage: number) {
    currentCid.value = cId
    const {data} = await findModulesByCID(cId, currentPage)
    data.state == 200? handlePage(data.data) : ElMessage.warning(data.message)
}

/**
 * 处理分页
 * @param page 分页数据 
 */
function handlePage(page:PageData){
    const totalPage = Math.ceil(page.total / page.pageSize)
    pageObject.totalPage = totalPage
    modules.value = page.list
    if (page.total == null) {
        pageShow.value = false
    } else {
        pageShow.value = true
    }
}



/**
 * 查找目录,找到的数据存储至categories
 */
async function findAll() {
    const { data } = await findCategories()
    data.state == 200? categories.value = data.data : ElMessage.warning(data.message)
}


</script>

<style scoped>
.category-layout {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}


/* 按钮 */
.category-btn {
    margin: 8px 2px 8px 2px;
    box-shadow: 0px 0px 5px 0px whitesmoke;
    opacity: 0.8;
}

/* 搜索 */
.search-container {
    display: flex;
    justify-content: center;
}

.search-container-input {
    margin-right: 5px;
    margin-bottom: 20px;
    opacity: 0.7;    
    width: 340px;
}
.search-btn{
    opacity: 0.7;
}

@keyframes rotateIcon {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.refresh-btn{
    opacity: 0.7;
    animation: rotateIcon 0.5s ease;
}


.market-main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.market-footer {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}


/* 卡片过渡 */
.card-fade-enter-active,
.card-fade-leave-active {
    transition: opacity 0.5s ease;
}

.card-fade-enter-from,
.card-fade-leave-to {
    opacity: 0;
}
</style>